@extends('layouts.back_stage')
@section('content')
<script src="{{env('CDN_DOMAIN_NAME')}}/js/commonjs/JsBarcode.code128.min.js"></script>
<script src="{{env('CDN_DOMAIN_NAME')}}/js/printThis.js"></script>
  <style>
  #app{padding:20px}
  .code_center{width:313px;margin:0 auto }
  .pack_code{text-align:center;font-size:18px;color:#000}
  </style>
  <div class="container">
        <div class="page-body" id="app"> 
        <el-button type="primary" class="touching"  @click="store" size="small" >打印</el-button>
        </div> 
        <div class=print-box>
        
         
              <style>
                .code_center{width:313px;margin:0 auto }
                .pack_code{text-align:center;font-size:18px;color:#000;margin-bottom:20px}
              </style>
              <div id="aa" > </div>       
      
      </div>      
  </div>
  <!-- 这个也是打印的一种方式 -->
   <!--startprint--> 
     <!--endprint-->  
  <script>
     
      new Vue({
        el: '#app',
      data() {    
          return {
            input_a:'',
            input_a1:'',
            input_b:'',
          }
        },
      methods: {
          respont(){
   let that=this
            let codes = []
            let options={
                  format:'CODE128',
                  displayValue:'false',
                  fontSize:"18",
                  height:100
              };
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                type: 'post',
                url: '/packs/store',
                data: {
                  capacity:this.input_a1,
                  quantity:this.input_b
                },
                success: function (res) {
                  var arr=res.content.packets
                    $.each(arr,function(index,value){
                    $('#aa').append(`<div class="code_center" ><img  id='${value.id}'/> <div class="pack_code">${value.packet_code}</div></div>`)
                    JsBarcode($('#'+value.id),value.packet_code,options);
                    $('#'+value.id).show().JsBarcode(value.packet_code,options);
                        codes.push(value.packet_code)
                    })
                  }
              });
          },
          store(){
            $(".print-box").printThis({importCSS: true,importStyle: true})
            // 打印的一个方式
            // var bdhtml = window.document.body.innerHTML;//获取当前页的html代码
            // var startStr = "<!--startprint-->";//设置打印开始区域
            // var endStr = "<!--endprint-->";//设置打印结束区域
            // var printHtml = bdhtml.substring(bdhtml.indexOf(startStr) + startStr.length, bdhtml.indexOf(endStr));//从标记里获取需要打印的页面
            // window.document.body.innerHTML = printHtml;//需要打印的页面
            // window.print();
            // window.document.body.innerHTML = bdhtml;//还原界面
           // window.location.reload();
          },
       },
       created(){
         this.input_a=window.location.href.split('?input_a=')[1]
         this.input_a1=this.input_a.split('&')[0]
         this.input_b=this.input_a.split('&input_b=')[1]
         this.respont();
        }
      })
  </script>
@endsection